<template>
  <view class="wrapper">
    <image class="image" :src="list.coverUrl" mode="widthFix"></image>
    <view class="contents">
      <text class="title">{{ list.activityName }}</text>
      <view class="time public">
        <text>活动时间</text>
        <text>{{ list.startTime }}至{{ list.endTime }}</text>
      </view>
      <view class="place public">
        <text>活动地点</text>
        <text>{{ list.position }}</text>
      </view>
      <view class="content public">
        <text>活动详情</text>
        <mp-html :content="list.activityContent" />
      </view>
    </view>
  </view>
</template>

<script>
import { getActivityDetail } from '@/api'
export default {
  data() {
    return {
      list: {}
    }
  },
  onLoad(e) {
    this.id = e.id
    this.getDetail()
  },
  methods: {
    getDetail() {
      getActivityDetail(this.id).then(res => {
        this.list = res.data
      })
    }
  }
}
</script>

<style lang="less" scoped>
.contents {
  padding: 0 20rpx 20rpx;
  .title {
    font-size: 36rpx;
  }
  .time {
    margin: 20rpx 0;
  }
  .place {
  }
  .content {
    margin-top: 20rpx;
  }
  .public {
    display: flex;
    flex-direction: column;
  }
}
</style>
